{include file="/index/top"}

<style>
    .layui-form-label{
        width: 100px;
    }
    .form-body{
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 1200px;
        position: absolute;
    }
    .form-body>form{
        width: 750px;
        left: 0;
        right: 0;
        margin: 0 auto;
        margin-top: 40px;
    }
    .input-margin-left{
        margin-left: 10px;
    }
    .banner {
        position: absolute;
        z-index: 10;
        width: 100%;
        text-align: center;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height:30vh;
        margin: auto;
        padding-top: 30vh;
    }

    .banner-text {
        font-family: Pecita;
        color: #ffffff;
        font-size: 2vw;
    }

    .banner-text > p {
        line-height: 10vh;
    }
    .left{
        float: left;
    }
    .right{
        float: right;
    }
</style>
<div>
    <img src="__static__/images/apply.jpg" class="img-responsive" alt="Responsive image" width="100%">
    <div style="">
        <div style="position: absolute;display: block;top: 0;width: 100%">
            {include file="/index/topnav"}
            <div class="banner" id="child">
                <!--<div class="banner-text layui-anim layui-anim-scaleSpring" style="height: 200px">-->
                    <!--<p>网 院 计 算 机 协 会</p>-->
                    <!--<p>加 入 我 们</p>-->
                    <!--<h3>交流学术知识，传播创新理念，激发创新意识，弘扬创新精神</h3>-->
                <!--</div>-->
            </div>
        </div>
    </div>
</div>
<div class="form-body" style="position: relative;margin-bottom: 60px">
    <form class="layui-form" class="layui-form" method="post"  id="apply" >
        <div class="layui-form-item"><label class="layui-form-label">姓名</label>

            <div class="layui-input-block">
                <input type="text" name="Name" lay-verify="required" autocomplete="off" maxlength="4" placeholder="请输入真实姓名" class="layui-input"></div>
        </div>
        <div class="layui-form-item"><label class="layui-form-label">性别</label>

            <div class="layui-input-block">
                <select name="Sex" lay-verify="required">
                    <option value="">请选择性别</option>
                    <option value="0">男</option>
                    <option value="1">女</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">生日日期</label>

                <div class="layui-input-inline input-margin-left">
                    <input type="text" class="layui-input" name="Birthday" id="test20" placeholder="请选择你的生日日期">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学号</label>

            <div class="layui-input-block">
                <input type="text" placeholder="请输入学号"
                        autocomplete="off"
                       class="layui-input" name="StudentId" oninput="if(value.length>12)value=value.slice(0,12)">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">身份证号</label>
            <div class="layui-input-block">
                <input type="text" oninput="if(value.length>18)value=value.slice(0,18)" name="identity" placeholder="请输入身份证号" maxlength="" lay-verify="required"autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">手机号码</label>

                <div class="layui-input-inline input-margin-left">
                    <input type="tel" id="telephone" name="Telephone" placeholder="请输入手机号码" lay-verify="required|phone"
                           class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="VcCode" lay-verify="required" placeholder="请输入验证码" autocomplete="off"
                           class="layui-input">

                </div>
                <div class="layui-input-inline">
                    <button class="layui-btn" id="getCode">获取验证码</button>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">QQ</label>

            <div class="layui-input-block">
                <input type="text" name="QQ" placeholder="请输入常用QQ号"  placeholder=""
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>

            <div class="layui-input-block">
                <input type="email" name="Email" placeholder="请输入常用邮箱" lay-verify="email" placeholder=""
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">系别班级</label>

            <div class="layui-input-inline input-margin-left">
                <select name="Grade" lay-filter="selectGrade" lay-verify="required">
                    <option value="">请选择年级</option>
                    <option v-for="pro in gradeList" :value="pro">{{pro}}</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="Department" lay-verify="required" lay-filter="selectDepartment">
                    <option value="">请选择系</option>
                    <option v-for="city in departmentList" :value="city">{{city}}</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="Class" lay-verify="required">
                    <option value="">请选择班级</option>
                    <option v-for="dd in classList" :value="dd">{{dd}}</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">宿舍号</label>

            <div class="layui-input-block">
                <input type="text"  placeholder="请输入宿舍号如：1-104-2"  placeholder=""
                       autocomplete="off" name="DmId" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <div class="layui-input-block">
                <textarea placeholder="为什么选择加入计算机协会？请简单介绍下自己，字数100字以上" name="Why" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn"  lay-submit="apply" lay-filter="apply">提交申请</button>
            </div>
        </div>
    </form>
</div>
{include file="/index/footer"}
<script>



    layui.use('form', function () {
        var form = layui.form;
        var grade = "";//独立版的layer无需执行这一句
        var app = new Vue({
            el: '#apply',
            data: {
                gradeList: [],
                departmentList: [],
                classList: []
            }, created: function () {
                $.ajax({
                    type: "POST",
                    url: "api/getClassInfo",
                    dataType: "json",
                    data: JSON.stringify({"way": 1}),
                    async: true,
                    contentType: "application/json",
                    headers: __AUTH__,
                    success: function (resp) {
                        app.gradeList = resp.data;
                    }

                })
            }, updated: function () {
                form.render();
            }
        });
        form.on('select(selectGrade)', function (data) {
            if (data == null) {
                app.departmentList = [];
                app.classList = [];
                return false;
            }
            $.ajax({
                type: "POST",
                url: "api/getClassInfo",
                dataType: "json",
                data: JSON.stringify({"way": 2, "grade": data.elem.value}),
                async: true,
                contentType: "application/json",
                headers: __AUTH__,
                success: function (resp) {
                    app.departmentList = resp.data;
                    grade = data.elem.value;
                }
            });
        });
        form.on('select(selectDepartment)', function (data) {
            $.ajax({
                type: "POST",
                url: "api/getClassInfo",
                dataType: "json",
                data: JSON.stringify({"way": 3, "grade": grade, "department": data.elem.value}),
                async: true,
                contentType: "application/json",
                headers: __AUTH__,
                success: function (resp) {
                    app.classList = resp.data;
                }
            });
        });
    });
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#test20',
            format: 'yyyyMMdd',
            showBottom: false
            , done: function (value, date) {

            }
        });
    });


</script>
<script>
    layui.use('form', function () {
        var form = layui.form;
        //监听提交
        form.on('submit(apply)', function (data) {
            $.ajax({
                type: "POST",
                url: "api/apply",
                dataType: "json",
                data: JSON.stringify(data.field),
                async: false,
                contentType: "application/json",
                headers: __AUTH__,
                success: function (resp) {
                    layui.use('layer', function(){
                        var layer = layui.layer;
                        layer.msg(resp.msg);
                    });
                },
                error:function(error){
                    console.log(error)
                }
            });
            return false;
        })
    })
</script>
<script>

    $("#getCode").click(function(){
        var InterValObj; //timer变量，控制时间
        var count = 60; //间隔函数，1秒执行
        var curCount;
        curCount = count;
        $("#getCode").attr("disabled", "true");
        $("#getCode").text("重新获取("+curCount+"s)");
        InterValObj = window.setInterval(function(){
            if (curCount == 0) {
                window.clearInterval(InterValObj);//停止计时器
                $("#getCode").attr("disabled","false");//启用按钮
                $("#getCode").text("获取验证码");
            }else {
                curCount--;
                $("#getCode").text("重新获取("+curCount+"s)");
            }
        },1000); //启动计时器，1秒执行一次
        var telephone = $('#telephone').val();
        $.ajax({
            type: "POST",
            url: "api/getCode",
            dataType: "json",
            data: JSON.stringify({"telephone": telephone}),
            async: true,
            contentType: "application/json",
            headers: __AUTH__,
            success: function (resp) {
                if(resp.code = 1){

                }
            }
        })

    });
</script>
</body>
</html>